<template>
  <div class="useing">
    <a-form-model
      :style="{}"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="name" label="时隙占用情况" prop="name">
        <div class="tableContainer">
          <div
            class="tableItem"
            :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
            :key="index + 'timeSolt'"
            v-for="(item, index) in statusList"
          >
            {{ item.status == 0 || item.status == 1 ? '空' : index + 1 }}
          </div>
        </div>
      </a-form-model-item>
      <a-form-model-item ref="name" label="频道占用情况" prop="name">
        <div class="tableContainer">
          <div
            class="tableItem"
            :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
            :key="index + 'timeSolt'"
            v-for="(item, index) in statusList1"
          >
            {{ item.status == 0 || item.status == 1 ? '空' : '' }}
          </div>
        </div>
      </a-form-model-item>

      <!-- <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="danger" @click="forcedReturn"> 强退 </a-button>
        <a-button style="margin-left: 10px" type="primary" @click="onDetail"> 详情 </a-button>
        <a-button style="margin-left: 10px" @click="config"> 配置 </a-button>
      </a-form-model-item> -->
    </a-form-model>
    <!-- <div class="tableContainer">
      <div
        class="tableItem"
        :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
        :key="index + 'timeSolt'"
        v-for="(item, index) in statusList1"
      >
        {{ item.status == 0 || item.status == 1 ? '空' : index + 1 + '占用' }}
      </div>
    </div>
    <div class="tableContainer">
      <div
        class="tableItem"
        :class="item.status == 1 ? 'empty' : item.status == 2 ? 'employ' : ''"
        :key="index + 'timeSolt'"
        v-for="(item, index) in statusList"
      >
        {{ item.status == 0 || item.status == 1 ? '空' : index + 1 + '占用' }}
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {},
      rules: [],
      statusList1: [
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
        { status: 1 },
      ],
      statusList: [
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 2 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 0 },
        { status: 1 },
        { status: 1 },
      ],
    }
  },
}
</script>

<style lang="less" scoped>
.tableContainer {
  width: 402px;
  display: flex;
  border: solid 0.1px;
  flex-wrap: wrap;
  margin: 30px auto;
  .tableItem {
    width: 50px;
    height: 50px;
    border: solid 0.1px;
  }
}
.employ {
  background-size: 50px 50px;
  background-color: #7bf35d;
  background-image: -webkit-linear-gradient(
    -45deg,
    rgba(133, 201, 56, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(139, 248, 96, 0.2) 50%,
    rgba(116, 115, 115, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-image: linear-gradient(
    -45deg,
    rgba(107, 106, 106, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(134, 132, 132, 0.2) 50%,
    rgba(117, 116, 116, 0.2) 75%,
    transparent 75%,
    transparent
  );
}
.useing {
  width: 100%;
  margin: auto;
  text-align: center;
  line-height: 50px;
}
</style>
